<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
    <style>
        .fade-enter-active {
            transition: all .3s ease;
        }
        .fade-leave-active {
            transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }
        .fade-enter, .fade-leave-to {
            transform: translateY(10px);
            opacity: 0;
        }
    </style>
    </head>
    <body>
        <div id = "app">
            <button v-on:click = "show = !show">{{ show ? '隐藏' : '显示'}}</button>
            <transition name = "fade">
                <p v-show = "show" >Hello ！</p>
            </transition>
        </div>
    </body>
    <script src="../../js/vue.js"></script>
    <script type = "text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                show:true
            }
        });
    </script>
</html>
